<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input class="input" v-model.trim="reqParams.sn" clearable placeholder="请输入 SN 查询" />
					<el-input
						class="input"
						v-model.trim="reqParams.customerSn"
						clearable
						placeholder="请输入客户条码查询" />
					<RangeDate @change="rangeDateChange" />
					<el-button icon="el-icon-search" type="primary" @click="search" />
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:api-obj="this.$API.prodtranssn.page"
				:params="reqParams"
				:column="column"
				row-key="id"
				show-overflow-tooltip
				stripe
				hideContextMenu>
				<el-table-column align="center" fixed="right" label="操作" width="70">
					<template #default="scope">
						<el-dropdown @command="handleCommand">
							<el-button icon="el-icon-more" size="small"></el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item
										:command='{command: "concession", commandName: "让步接收", data: scope.row }'
										:disabled="!(scope.row.status === 2)">
										让步接收
									</el-dropdown-item>
									<el-dropdown-item
										:command='{command: "mandatory_ng", commandName: "强制 NG", data: scope.row}'
										divided
										:disabled="!(scope.row.status === 1)">
										强制 NG
									</el-dropdown-item>
									<el-dropdown-item
										:command='{command: "scrap", commandName: "报废", data: scope.row }'
										divided>
										报废
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
				<template #sn="{ data }">
					<el-link type="primary" @click="detail(data)">{{ data.sn }}</el-link>
				</template>
				<template #stage="{ data }">
					<el-tag type="" v-if="data.stage === 2">{{ data.stageDesc }}</el-tag>
					<el-tag type="warning" v-else>{{ data.stageDesc }}</el-tag>
				</template>
				<template #status="{ data }">
					<el-tag type="success" v-if="data.status === 1">{{ data.statusDesc }}</el-tag>
					<el-tag type="danger" v-else-if="data.status === 2">{{ data.statusDesc }}</el-tag>
					<el-tag type="Warning" v-else>{{ data.statusDesc }}</el-tag>
				</template>
				<template #isCompelted="{ data }">
					<el-tag type="">{{ data.isCompelted ? "是" : "否" }}</el-tag>
				</template>
				<template #reworkFlag="{ data }">
					<el-tag type="">{{ data.reworkFlagDesc }}</el-tag>
				</template>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
import RangeDate from "../../components/RangeDate";

export default {
    components: {
        RangeDate,
    },
    data() {
        return {
            reqParams: {
                sn: '',
                customerSn: '',
                startTime: '',
                endTime: '',
            },
            column: [
                { prop: "id", label: "id", width: 100, hide: true },
                { prop: 'sn', label: 'SN', width: 280 },
                { prop: 'curLineCode', label: '产线编号', width: 160 },
                { prop: 'wo', label: '工单号', width: 160 },
                { prop: 'productCode', label: '产品编号', width: 160 },
                { prop: 'curOpCode', label: '当前工位', width: 100 },
                { prop: 'curProcCode', label: '当前工序', width: 100 },
                { prop: "stage", label: "工位状态", width: 80 },
                { prop: "status", label: "产品状态", width: 80 },
                { prop: 'isCompelted', label: '是否已完工', width: 100 },
                { prop: 'customerSn', label: '客户条码', width: 220 },
                { prop: 'reworkFlag', label: '当前返工状态', width: 100 },
                { prop: 'reworkDoc', label: '最近返工单号', width: 140 },
                { prop: 'reworkCount', label: '已返工次数', width: 100 },
            ]
        };
    },
    methods: {
        rangeDateChange(rangeDate) {
            if (rangeDate !== null) {
                this.reqParams.startTime = rangeDate[0];
                this.reqParams.endTime = rangeDate[1];
            }
        },
        search() {
            this.$refs.table.upData(this.reqParams);
        },
        detail(row) {
            // 高版本 Vue Router 不支持使用 params 传递数据，改为使用 History API 传递参数
            this.$router.push({
                name: 'trace/archive',
                state: { sn: row.sn },
            });
        },
		handleCommand(cmd) {
			this.$confirm(
				`确定要对 ${cmd.data.sn} 进行 ${cmd.commandName} 吗？`,
				"提示",
				{
					type: "warning",
					confirmButtonText: "确定",
					cancelButtonText: "取消",
				}
			).then(async () => {
				const params = {id: cmd.data.id};
				let resp = null;
				switch (cmd.command)
				{
					case "concession":
					resp = await this.$API.prodtranssn.concession.post(params);
						break;
					case "mandatory_ng":
					resp = await this.$API.prodtranssn.mandatoryNg.post(params);
						break;
					case "scrap":
					resp = await this.$API.prodtranssn.scrap.post(params);
						break;
				}

				if (resp && resp.code === 200) {
					if (resp.data.success) {
						this.$message.success('提交成功');
						this.search();
					} else {
						this.$message.error(resp.data.errMessage);
					}
				}
			}).catch(() => {});
		}
    },
}
</script>

<style scoped>
.input {
    width: 160px;
}
</style>
